<template>
  <div>
    <div class="titleLine">
      <div class="titleLine__lump"></div>
      <div class="titleLine__text">新人提醒</div>
    </div>
    <div class="setBox">
      <div class="setBox__line">
        <div class="setBox__line--text">提醒设置</div>
        <div class="setBox__line--right">
          <el-radio v-model="newRadio" label="1">开启</el-radio>
          <el-radio v-model="newRadio" label="2">关闭</el-radio>
        </div>
      </div>
      <div class="setBox__line">
        <div class="setBox__line--text">欢迎词描述</div>
        <div class="setBox__line--right">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="欢迎词描述最多50个字"
            v-model="newArea"
            show-word-limit
            maxlength="50"
          ></el-input>
        </div>
      </div>
    </div>
    <div class="titleLine">
      <div class="titleLine__lump" style="background-color:#FF9900"></div>
      <div class="titleLine__text">接单提醒</div>
    </div>
    <div class="setBox">
      <div class="setBox__line">
        <div class="setBox__line--text">提醒设置</div>
        <div class="setBox__line--right">
          <el-radio v-model="orderRadio" label="1">开启</el-radio>
          <el-radio v-model="orderRadio" label="2">关闭</el-radio>
        </div>
      </div>
      <div class="setBox__line">
        <div class="setBox__line--text">接单提醒描述</div>
        <div class="setBox__line--right">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="接单提醒描述最多50个字"
            v-model="orderArea"
            show-word-limit
            maxlength="50"
          ></el-input>
        </div>
      </div>
    </div>
    <div class="titleLine">
      <div class="titleLine__lump" style="background-color:#006EFF"></div>
      <div class="titleLine__text">到货提醒</div>
    </div>
    <div class="setBox">
      <div class="setBox__line">
        <div class="setBox__line--text">提醒设置</div>
        <div class="setBox__line--right">
          <el-radio v-model="getRadio" label="1">开启</el-radio>
          <el-radio v-model="getRadio" label="2">关闭</el-radio>
        </div>
      </div>
      <div class="setBox__line">
        <div class="setBox__line--text">到货提醒描述</div>
        <div class="setBox__line--right">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="到货提醒描述最多50个字"
            v-model="getArea"
            show-word-limit
            maxlength="50"
          ></el-input>
        </div>
      </div>
    </div>
    <el-button type="primary" style="margin-left:40px;">保存</el-button>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component
export default class MessageManage extends Vue {
  /** 新人提醒 */
  newRadio = "1";

  /** 新人欢迎词 */
  newArea = "";

  /** 接单提醒 */
  orderRadio = "1";

  /** 接单提醒词 */
  orderArea = "";

  /** 到货提醒 */
  getRadio = "1";

  /** 到货提醒词 */
  getArea = "";
}
</script>

<style lang="scss" scoped>
@include b(titleLine) {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background-color: #f8f8f8;

  @include e(lump) {
    width: 5px;
    height: 20px;
    background-color: #66cc99;
    margin-left: 20px;
  }
  @include e(text) {
    font-size: 14px;
    margin-left: 10px;
    color: #6b6b6b;
  }
}

@include b(setBox) {
  padding-left: 20px;
  padding-bottom: 30px;
  @include e(line) {
    display: flex;
    margin-top: 30px;
    @include m(text) {
      width: 100px;
      display: flex;
      justify-content: flex-end;
    }
    .setBox__line--text::before {
      content: "*";
      color: #ff6969;
      margin-right: 5px;
    }

    @include m(right) {
      margin-left: 20px;
      width: 300px;
    }
  }
}
</style>
